<template>
	<view class="car-item ss-flex" @click="goDetails">
		<image class="car-image" :src="item.logo"></image>
		<view class="car-right">
			<view class="car-title ss-line-2">{{item.name}}</view>
			<view class="car-price">{{item.price}}</view>
			<view class="car-type">{{item.sizetype}}</view>
			
			<button class="car-btn" v-if="!props.isPk">查看详情</button>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import sheep from '@/sheep';
	
	const props = defineProps({
		isPk: {
			type: Boolean,
			default: false,
		},
		item: {
			type: Object,
			default() {},
		},
	});
	const emits = defineEmits(['select'])
	function goDetails() {
		if(props.isPk) {
			emits('select', props.item)
		}else {
			sheep.$router.go('/pages/car/car-details?car_id=' + (props.item.one_id || props.item.parentid) + '&title=' + props.item.name)
		}
	}
</script>

<style lang="scss" scoped>
	.car-item {
		position: relative;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #fff;
		
		&:last-child {
			border-bottom: 0;
		}
		
		.car-image {
			width: 260rpx;
			height: 200rpx;
		}
		.car-right {
			flex: 1;
			margin-left: 20rpx;
			.car-title {
				font-weight: 700;
				color: #333;
			}
			.car-price {
				color: #ff6400;
				font-weight: 700;
			}
			
			.car-type {
				color: #999;
				font-size: 26rpx;
			}
		}
		
		.car-btn {
			position: absolute;
			right: 0;
			bottom: 30rpx;
			background: #fff;
			border: 1rpx solid #ff6400;
			font-size: 24rpx;
			line-height: 1.9;
			color: #ff6400;
			text-align: center;
		}
	}
</style>